<template>
  <div>
    <div class="My_title__39w3v">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      <div class="My_info__eOYeg">
        <div class="My_myIcon__3cKIV">
          <img
            :src="srcUrl"
            alt="icon"
          />
        </div>
        <div class="My_user__B6O1D">
          <div class="My_name__3U2NB">{{ username }}</div>
          <div class="My_edit__3wqlv" v-if="isShow">
            <van-button type="info" size="small" to="/login">去登录</van-button>
          </div>
          <div class="My_edit__3wqtz" v-else-if="!isShow">
            <van-button round type="info" size="mini" @click="clickFn"
              >退出</van-button
            >
          </div>
          <div class="My_edit__3wqgr" v-if="!isShow">
            编辑个人资料<van-icon name="play" />
          </div>
        </div>
      </div>
    </div>
    <div class="My_title__list">
      <van-grid :column-num="3" :gutter="5" :border="false">
        <van-grid-item to="/favorites" icon="star-o" text="我的收藏" />
        <van-grid-item to="/userhouser" icon="wap-home-o" text="我的出租" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="credit-pay" text="成为房主" />
        <van-grid-item icon="contact" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>
    <div class="My_ad__1wZZj">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
    <!--  <van-popup
      v-model="show"
      round
      :style="{ height: '140px', width: '270px' }"
      safe-area-inset-bottom
      safe-area-inset-top
    >
      <div class="am-modal-header">
        <div class="am-modal-title">提示</div>
      </div>

      <div class="am-modal-body">
        <div class="am-modal-alert-content">是否确定退出?</div>
      </div>
      <div class="am-modal-floot">
        <van-button plain color="#eeeeee" @click="clickShow">取消</van-button>
        <van-button plain color="#eeeeee" @click="clickSecede">退出</van-button>
      </div>
    </van-popup> -->
    <van-dialog v-model="show" title="标题" show-cancel-button> </van-dialog>
  </div>
</template>

<script>
import { user } from '@/api/uesr'
import { delToken, getToken } from '@/utils/storage'
export default {
  data () {
    return {
      username: '游客',
      isShow: true,
      show: false,
      srcUrl: 'http://liufusong.top:8080/img/profile/avatar.png'
    }
  },
  async created () {
    if (getToken()) {
      const { body } = await user()
      // console.log(body)
      this.username = body.nickname
      this.srcUrl = 'http://liufusong.top:8080' + body.avatar
      this.isShow = false
    }
  },
  methods: {
    clickFn () {
      this.$dialog.confirm({
        title: '提示',
        width: '270px',
        message: '是否确认退出？',
        confirmButtonText: '退出',
        confirmButtonColor: '#108ee9'
      })
        .then(() => {
          this.show = false
          this.isShow = true
          delToken()
          this.username = '游客'
          this.srcUrl = 'http://liufusong.top:8080/img/profile/avatar.png'
        })
        .catch(() => {
          this.show = false
        })
    }
    /*  clickShow () {
      this.show = false
    },
    clickSecede () {
      this.show = false
      this.isShow = true
      delToken()
    } */
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.My_title__39w3v {
  min-height: 300px;
  position: relative;
  img {
    width: 100%;
    box-sizing: border-box;
  }
}
.My_info__eOYeg {
  position: absolute;
  background: #fff;
  width: 85%;
  height: 55%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px 3px #ddd;
  margin: 50px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 13px;
}
.My_myIcon__3cKIV {
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  border: 5px solid #f5f5f5;
  display: inline-block;
  box-shadow: 0 2px 2px #bdbdbd;
  img {
    width: 100%;
    border-radius: 50%;
    border-style: none;
  }
}
.My_user__B6O1D {
  padding-top: 15px;
  .My_name__3U2NB {
    margin-top: -30px;
    margin-bottom: 5px;
  }
  .My_edit__3wqlv {
    color: #999;
    font-size: 12px;
    margin-top: 20px;
  }
  .My_edit__3wqtz {
    color: #999;
    font-size: 12px;
    margin-bottom: 15px;
    .van-button__text {
      padding: 0px 15px;
    }
  }
}
.My_ad__1wZZj {
  text-align: center;
  margin-top: 10px;
  img {
    width: 92%;
  }
}

/* 弹出框 */
.am-modal-header {
  padding: 6px 15px 15px;
  .am-modal-title {
    margin: 15px 0 0;
    font-size: 18px;
    line-height: 1;
    color: #000;
    text-align: center;
  }
}
.am-modal-body {
  padding: 0 15px 15px;
  font-size: 15px;
  color: #888;
  line-height: 1.5;
  overflow: auto;
  text-align: center;
  .am-modal-alert-content {
    zoom: 1;
    overflow: hidden;
  }
}
.am-modal-floot {
  display: flex;
  box-sizing: content-box;
  width: 100%;
  .van-button {
    flex: 50%;
    border-bottom: none;
    height: 48px;
    .van-button__text {
      color: #000;
      font-size: 18px;
    }
  }
}
.am-modal-floot button:last-child .van-button__text {
  color: #108ee9;
}
</style>
